<template>
  <div id="app">
    <div class="spinner" v-show="isLoading">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
    <div v-show="!isLoading">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapGetters([
      'updateLoadingStatus'
    ]),
    isLoading () {
      return this.updateLoadingStatus
    }
  }
}
</script>

<style>
  @import "assets/css/input.css";
  * {box-sizing: border-box; font-family: 微软雅黑!important;}
  body,
  dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  pre, code, form, fieldset, legend, input, textarea,
  p, blockquote, th, td, hr, button,
  article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* 默认不要下划线 */
  a {text-decoration: none;}
  /* 按钮文本不可选 */
  button {user-select: none;}
  img {vertical-align: middle;}
  /* 加载不出来的图片不要显示灰色边框 */
  img:not([src]),img[src=""] {opacity: 0;}
  ul, ol {list-style: none;}
  table {border-collapse: collapse; border-spacing: 0;}
  input, select, textarea {outline: none; border: none; color:#fff;}
  html, body {height: 100%; overflow-x: hidden;}
  input::-webkit-input-placeholder{
    color:#cacaca;
  }
  textarea::-webkit-input-placeholder{
    color:#cacaca;
  }
  input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#cacaca;
  }
  input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
</style>
<style scoped>
  .spinner {
    margin: calc(50vh - 0.15rem) auto 0;
    width: 3rem;
    text-align: center;
  }

  .spinner > div {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #00c0f8;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }

  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }

  @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
  }

  @keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
  }
</style>
